
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="title" content="Bootstrap 4 Interface Builder | LayoutIt!" />
<meta name="description" content="LayoutIt! is a interface builder for CSS Grid and Bootstrap that wants to be the kick-off for your front-end developments." />
<meta name="keywords" content="" />
<meta name="language" content="en" />
<title>Bootstrap 4 Interface Builder | LayoutIt!</title>

<!-- Fav and touch icons -->
<link rel="apple-touch-icon" sizes="57x57" href="https://d2wywi1esboz4t.cloudfront.net/img/icons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://d2wywi1esboz4t.cloudfront.net/img/icons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://d2wywi1esboz4t.cloudfront.net/img/icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://d2wywi1esboz4t.cloudfront.net/img/icons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://d2wywi1esboz4t.cloudfront.net/img/icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://d2wywi1esboz4t.cloudfront.net/img/icons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://d2wywi1esboz4t.cloudfront.net/img/icons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://d2wywi1esboz4t.cloudfront.net/img/icons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://d2wywi1esboz4t.cloudfront.net/img/icons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="https://d2wywi1esboz4t.cloudfront.net/img/icons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://d2wywi1esboz4t.cloudfront.net/img/icons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="https://d2wywi1esboz4t.cloudfront.net/img/icons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="https://d2wywi1esboz4t.cloudfront.net/img/icons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="https://d2wywi1esboz4t.cloudfront.net/img/icons/manifest.json">
<link rel="shortcut icon" href="https://d2wywi1esboz4t.cloudfront.net/img/icons/favicon.ico">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="https://d2wywi1esboz4t.cloudfront.net/img/icons/mstile-144x144.png" title="favicon ie10">
<meta name="msapplication-config" content="https://d2wywi1esboz4t.cloudfront.net/img/icons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">			    
		<meta property="og:title" content="Bootstrap 4 Interface Builder | LayoutIt!" />
			
		<meta property="og:description" content="LayoutIt! is a interface builder for CSS Grid and Bootstrap that wants to be the kick-off for your front-end developments." />
		
	<meta property="og:image" content="http://layoutit.com/img/share-logo.png" />

	<meta property="og:url" content="http://layoutit.com/build" />


	<link rel="canonical" href="https://www.layoutit.com/build">
  
  
  
  <!-- Javascript -->
  <script type="text/javascript" src="./jquery.min.js"></script>
  <script type="text/javascript" src="./jquery-ui.min.js"></script>
  <script type="text/javascript" src="./jquery.ui.touch-punch.min.js"></script>
  <script type="text/javascript" src="./jquery.html-clean.min.js"></script>

  <script type="text/javascript" src="./general.js"></script>
  <script type="text/javascript" src="./builder.js"></script>

  <script type="text/javascript" src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
  <script type="text/javascript" src="/builder/v4/layoutit/src/js/popper.min.js"></script>
  <!-- <script type="text/javascript" src="/builder/v4/layoutit/src/js/bootstrap.min.js"></script> -->
  

  <!-- <link href="/builder/v4/layoutit/src/css/bootstrap.min.css" rel="stylesheet"> -->

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
  <!-- LESS include for dev only -->
  <link rel="stylesheet/less" type="text/css" href="./common.less" />
  <link rel="stylesheet/less" type="text/css" href="./homepage.less" />
  <link rel="stylesheet/less" type="text/css" href="./builder.less" />
  <!-- <link rel="stylesheet/less" type="text/css" href="/css/less/profile.less" /> -->
  <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400i,700,700i,900,900i" rel="stylesheet">

  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.0/less.min.js" ></script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

  

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-33375730-1"></script>
<script>
	window.dataLayer = window.dataLayer || []
	function gtag() {
	dataLayer.push(arguments)
	}
	gtag('js', new Date())
	gtag('config', 'UA-33375730-1', { client_storage: 'none', anonymize_ip: true })
</script>
	 
</head>

<body class="edit builder">
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top navbar-layoutit">
    <div class="navbar-header">
    <a class="navbar-brand" href="/">  Layoutit!</a>
      <ul class="navbar-nav mr-auto" id="menu-layoutit">
        <li class="tools-btns">
          <div data-toggle="buttons-radio">
            <button id="edit" class="active btn btn-primary"><i class="fas fa-edit"></i> <span> Edit </span></button>
            <button class="btn btn-primary" id="sourcepreview"><i class="fas fa-eye"></i>  <span> Preview </span> </button>                   
            <button class="btn btn-primary" id="button-download-modal" href="/build_v4/downloadAjax" data-target="#layoutitModal" data-toggle="modal"><i class="fas fa-download"></i>  <span> Download </span> </button>
            <button class="btn btn-primary" id="button-share-modal" href="/share/indexV4" data-toggle="modal" data-target="#layoutitModal" data-toggle="modal"><i class="fas fa-share"></i> <span> Permalink </span> </button>
            <button class="btn btn-icon" href="#clear" id="clear"><i class="fas fa-trash-alt"></i></button>
            <a href="/build_v3/startWithLayout/layout/2"> <button class="btn-primary btn-old-bs"> Use Bootstrap 3</button></a>
          </div>
        </li>
      </ul>
    </div>
    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <div class="top-btns ml-lg-auto">
        <div class="btn-group">
        						
          <a class="top-link" href="/en/register" >Register</a> |
          <a class="top-link" href="/en/login">Login</a>
                </div>
          <a href="https://www.leniolabs.com/services/team-augmentation/?utm_source=layoutit&utm_medium=banner&utm_campaign=leniolabs&utm_content=bootstrap_hire_us" target="_blank" role="button" class="button btn-hire-inner">
            Hire Us          </a>
          <button href="/feedbacks/indexV3" role="button" data-toggle="modal" data-target="#layoutitModal" id="feedback" class="button btn-feedback btn-primary">
            Feedback          </button>
        <!-- <div class="btn-group btn-donate">
          <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
          <input type="hidden" name="cmd" value="_s-xclick">
          <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----MIIHLwYJKoZIhvcNAQcEoIIHIDCCBxwCAQExggEwMIIBLAIBADCBlDCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20CAQAwDQYJKoZIhvcNAQEBBQAEgYASAdTKjf0GguSjw43QG6mCW2th/FFuBHCbb0MSvelGA8xOV8xhJE0UGd0rPnCWoHM2f5hT4s2GWFUdYkYT6cu64lrGQZsOH34OAViNOia/B9ew/pzMRsMiGRUt834QH7kTCEzjCg1l23ygcHSUs9O3XYaaQoLgqNx3x8qXrQbpCTELMAkGBSsOAwIaBQAwgawGCSqGSIb3DQEHATAUBggqhkiG9w0DBwQIzoI4CQVk9aKAgYigHMDg4UVTn9Pxy4LaWxq0I/PHapPoIsl2lzrQsZd1SEfg/JpGo5zoAch6I4lfrbN/8PvR3alWV/H+z8y1eQ//s2MNK0+bLTJfoSJdwAvLNbLF7EbgczDehnPWLXQAjp0LmJjHK8jpPAYxKLZCQsSrhqhTpGWy7wP2sSqI7Y49hmdv7PDBKde6oIIDhzCCA4MwggLsoAMCAQICAQAwDQYJKoZIhvcNAQEFBQAwgY4xCzAJBgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChMLUGF5UGFsIEluYy4xEzARBgNVBAsUCmxpdmVfY2VydHMxETAPBgNVBAMUCGxpdmVfYXBpMRwwGgYJKoZIhvcNAQkBFg1yZUBwYXlwYWwuY29tMB4XDTA0MDIxMzEwMTMxNVoXDTM1MDIxMzEwMTMxNVowgY4xCzAJBgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChMLUGF5UGFsIEluYy4xEzARBgNVBAsUCmxpdmVfY2VydHMxETAPBgNVBAMUCGxpdmVfYXBpMRwwGgYJKoZIhvcNAQkBFg1yZUBwYXlwYWwuY29tMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDBR07d/ETMS1ycjtkpkvjXZe9k+6CieLuLsPumsJ7QC1odNz3sJiCbs2wC0nLE0uLGaEtXynIgRqIddYCHx88pb5HTXv4SZeuv0Rqq4+axW9PLAAATU8w04qqjaSXgbGLP3NmohqM6bV9kZZwZLR/klDaQGo1u9uDb9lr4Yn+rBQIDAQABo4HuMIHrMB0GA1UdDgQWBBSWn3y7xm8XvVk/UtcKG+wQ1mSUazCBuwYDVR0jBIGzMIGwgBSWn3y7xm8XvVk/UtcKG+wQ1mSUa6GBlKSBkTCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb22CAQAwDAYDVR0TBAUwAwEB/zANBgkqhkiG9w0BAQUFAAOBgQCBXzpWmoBa5e9fo6ujionW1hUhPkOBakTr3YCDjbYfvJEiv/2P+IobhOGJr85+XHhN0v4gUkEDI8r2/rNk1m0GA8HKddvTjyGw/XqXa+LSTlDYkqI8OwR8GEYj4efEtcRpRYBxV8KxAW93YDWzFGvruKnnLbDAF6VR5w/cCMn5hzGCAZowggGWAgEBMIGUMIGOMQswCQYDVQQGEwJVUzELMAkGA1UECBMCQ0ExFjAUBgNVBAcTDU1vdW50YWluIFZpZXcxFDASBgNVBAoTC1BheVBhbCBJbmMuMRMwEQYDVQQLFApsaXZlX2NlcnRzMREwDwYDVQQDFAhsaXZlX2FwaTEcMBoGCSqGSIb3DQEJARYNcmVAcGF5cGFsLmNvbQIBADAJBgUrDgMCGgUAoF0wGAYJKoZIhvcNAQkDMQsGCSqGSIb3DQEHATAcBgkqhkiG9w0BCQUxDxcNMTMwNTEwMTUwMjA2WjAjBgkqhkiG9w0BCQQxFgQUUkx22w+5kZSQBsE/0W+Xvfmd/lowDQYJKoZIhvcNAQEBBQAEgYAf23knifKlCsqDylQfO0nHX+d6PAndnaJN0CLrHvxH0/7x7NXy1XCGn/CfkXHmIq9pEEtGo5Zrhm159T5XmYMWbv+CgGYR2udEri4sbIB1qJDEr+1p3VUaeq0qU3mc16yTYZYOdIvuOB4OUVg1NKzHE3fSgW9a+PYd1eBRZ2P5Zw==-----END PKCS7-----">
          <button name="submit" alt="PayPal - The safer, easier way to pay online!" class="button btn-donate">Donate</button>
          <img alt="Donate to LayoutIt!" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
          </form>
        </div> -->
      </div>
    </div>
	</nav>
	
	<div class="container-fluid">
		<div class="row">
	<div class="sidebar-nav">
		
<ul class="nav nav-list flex-column accordion-group">
<li class="nav-item nav-header">
 <div class="float-right popover-info"><i class="fas fa-question-circle"></i>
 <div class="popover fade right"><div class="arrow"></div> 
 	<h3 class="popover-title">Help</h3> 
 	<div class="popover-content">To change the column configuration you can edit the different values in the input (they should add 12). If you need more info please visit <a target="_blank" href="http://getbootstrap.com/css/#grid">Bootstrap grid system.</a></div></div> 
 </div> 
<i class="fas fa-plus"></i> Grid system
</li>
	<li class="rows" id="estRows">
	
<div class="lyrow">
	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default "><i class="fas fa-arrows-alt"></i> drag</span>
	<div class="preview"><input type="text" value="12" placeholder="Enter your own" class="form-control"></div>
	<div class="view">
		<div class="row">
						<div class="col-md-12 column"></div>
					</div>
	</div>
</div>	
<div class="lyrow">
	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default "><i class="fas fa-arrows-alt"></i> drag</span>
	<div class="preview"><input type="text" value="6 6" placeholder="Enter your own" class="form-control"></div>
	<div class="view">
		<div class="row">
						<div class="col-md-6 column"></div>
						<div class="col-md-6 column"></div>
					</div>
	</div>
</div>	
<div class="lyrow">
	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default "><i class="fas fa-arrows-alt"></i> drag</span>
	<div class="preview"><input type="text" value="8 4" placeholder="Enter your own" class="form-control"></div>
	<div class="view">
		<div class="row">
						<div class="col-md-8 column"></div>
						<div class="col-md-4 column"></div>
					</div>
	</div>
</div>	
<div class="lyrow">
	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default "><i class="fas fa-arrows-alt"></i> drag</span>
	<div class="preview"><input type="text" value="4 4 4" placeholder="Enter your own" class="form-control"></div>
	<div class="view">
		<div class="row">
						<div class="col-md-4 column"></div>
						<div class="col-md-4 column"></div>
						<div class="col-md-4 column"></div>
					</div>
	</div>
</div>	
<div class="lyrow">
	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default display-none"><i class="fas fa-arrows-alt"></i> drag</span>
	<div class="preview"><input type="text" value="" placeholder="Enter your own" class="form-control"></div>
	<div class="view">
		<div class="row">
					</div>
	</div>
</div>	</li>
</ul>
		
<ul class="nav flex-column accordion-group">
<li class="nav-item nav-header"><i class="fas fa-plus"></i> Base CSS
 <div class="float-right popover-info"><i class="fas fa-question-circle"></i>
 <div class="popover fade right"><div class="arrow"></div> 
 	<h3 class="popover-title">Help</h3> 
 	<div class="popover-content">Drag &amp; Drop the elements inside the columns where you want to insert it. And from there, you can configure the style of that element. If you need more info please visit <a target="_blank" href="http://getbootstrap.com/css">Base CSS.</a></div></div> 
 </div>
</li>
<li class="boxes" id="elmBase">
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
		<span class="btn-group btn-group-sm">
	<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Align <span class="caret"></span></a>
	<div class="dropdown-menu">
				<a href="#" class="dropdown-item" class="active" rel="">Default</a>
				<a href="#" class="dropdown-item" class="" rel="text-left">Left</a>
				<a href="#" class="dropdown-item" class="" rel="text-center">Center</a>
				<a href="#" class="dropdown-item" class="" rel="text-right">Right</a>
			</div>
</span>
		<span class="btn-group btn-group-sm">
	<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Emphasis <span class="caret"></span></a>
	<div class="dropdown-menu">
				<a href="#" class="dropdown-item" class="active" rel="">Default</a>
				<a href="#" class="dropdown-item" class="" rel="text-muted">Muted</a>
				<a href="#" class="dropdown-item" class="" rel="text-primary">Primary</a>
				<a href="#" class="dropdown-item" class="" rel="text-success">Success</a>
				<a href="#" class="dropdown-item" class="" rel="text-info">Info</a>
				<a href="#" class="dropdown-item" class="" rel="text-warning">Warning</a>
				<a href="#" class="dropdown-item" class="" rel="text-danger">Danger</a>
			</div>
</span>
	</span>
	<div class="preview">Title</div>
<div class="view">
	<h3 contenteditable="true">h3. Lorem ipsum dolor sit amet.</h3>
</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
		<span class="btn-group btn-group-sm">
	<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Align <span class="caret"></span></a>
	<div class="dropdown-menu">
				<a href="#" class="dropdown-item" class="active" rel="">Default</a>
				<a href="#" class="dropdown-item" class="" rel="text-left">Left</a>
				<a href="#" class="dropdown-item" class="" rel="text-center">Center</a>
				<a href="#" class="dropdown-item" class="" rel="text-right">Right</a>
			</div>
</span>
		<span class="btn-group btn-group-sm">
	<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Emphasis <span class="caret"></span></a>
	<div class="dropdown-menu">
				<a href="#" class="dropdown-item" class="active" rel="">Default</a>
				<a href="#" class="dropdown-item" class="" rel="text-muted">Muted</a>
				<a href="#" class="dropdown-item" class="" rel="text-primary">Primary</a>
				<a href="#" class="dropdown-item" class="" rel="text-success">Success</a>
				<a href="#" class="dropdown-item" class="" rel="text-info">Info</a>
				<a href="#" class="dropdown-item" class="" rel="text-warning">Warning</a>
				<a href="#" class="dropdown-item" class="" rel="text-danger">Danger</a>
			</div>
</span>
						  
		<a class="btn btn-sm btn-default" href="#" rel="lead">Lead</a>
	</span>
	<div class="preview">Paragraph</div>
	<div class="view">
		<p contenteditable="true">Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu. </small></p>
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<div class="preview">Address</div>
	<div class="view">
		<address contenteditable="true">
			<strong>Twitter, Inc.</strong><br>
			795 Folsom Ave, Suite 600<br>
			San Francisco, CA 94107<br>
			<abbr title="Phone">P:</abbr> (123) 456-7890
		</address>
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">		  
		<a class="btn btn-sm btn-default" href="#" rel="text-right">Pull right</a>
	</span>
	<div class="preview">Blockquote</div>
	<div class="view">
	    <blockquote class="blockquote" contenteditable="true">
			<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
			<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
		</blockquote>
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">		  
		<a class="btn btn-sm btn-default" href="#" rel="list-unstyled">Unstyled</a>
		<a class="btn btn-sm btn-default" href="#" data-class="list-item" rel="list-inline-item">Inline</a>
	</span>
	<div class="preview">Unordered List</div>
	<div class="view">
			<ul contenteditable="true">
        <li class="list-item">Lorem ipsum dolor sit amet</li>
        <li class="list-item">Consectetur adipiscing elit</li>
        <li class="list-item">Integer molestie lorem at massa</li>
        <li class="list-item">Facilisis in pretium nisl aliquet</li>
        <li class="list-item">Nulla volutpat aliquam velit</li>
        <li class="list-item">Faucibus porta lacus fringilla vel</li>
        <li class="list-item">Aenean sit amet erat nunc</li>
        <li class="list-item">Eget porttitor lorem</li>
      </ul>
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">		  
		<a class="btn btn-sm btn-default" href="#" rel="list-unstyled">Unstyled</a>
		<a class="btn btn-sm btn-default" href="#" data-class="list-item" rel="list-inline-item">Inline</a>
	</span>
	<div class="preview">Ordered List</div>
	<div class="view">
			<ol contenteditable="true">
        <li class="list-item">Lorem ipsum dolor sit amet</li>
        <li class="list-item">Consectetur adipiscing elit</li>
        <li class="list-item">Integer molestie lorem at massa</li>
        <li class="list-item">Facilisis in pretium nisl aliquet</li>
        <li class="list-item">Nulla volutpat aliquam velit</li>
        <li class="list-item">Faucibus porta lacus fringilla vel</li>
        <li class="list-item">Aenean sit amet erat nunc</li>
        <li class="list-item">Eget porttitor lorem</li>
      </ol>
	</div>
</div>
	<div class="box box-element">
		<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">		  
	</span>
	<div class="preview">Description</div>
	<div class="view">
		<dl contenteditable="true">
			<dt>Description lists</dt>
			<dd>A description list is perfect for defining terms.</dd>
			<dt>Euismod</dt>
			<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
			<dd>Donec id elit non mi porta gravida at eget metus.</dd>
			<dt>Malesuada porta</dt>
			<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
			<dt>Felis euismod semper eget lacinia</dt>
			<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
		</dl>
	</div>
</div>
	<div class="box box-element">
		<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
		<span class="btn-group btn-group-sm">
	<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Style <span class="caret"></span></a>
	<div class="dropdown-menu">
				<a href="#" class="dropdown-item" class="active" rel="">Default</a>
				<a href="#" class="dropdown-item" class="" rel="table-striped">Striped</a>
				<a href="#" class="dropdown-item" class="" rel="table-bordered">Bordered</a>
			</div>
</span>
		<a class="btn btn-sm btn-default" href="#" rel="table-hover">Hover</a>
		<a class="btn btn-sm btn-default" href="#" rel="table-sm">Condensed</a>
	</span>
	<div class="preview">Table</div>
	<div class="view">
		<table class="table" contenteditable="true">
      <thead>
        <tr>
          <th>#</th>
          <th>Product</th>
          <th>Payment Taken</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
      	<tr>
          <td>1</td>
          <td>TB - Monthly</td>
          <td>01/04/2012</td>
          <td>Default</td>
        </tr>
        <tr class="table-active">
          <td>1</td>
          <td>TB - Monthly</td>
          <td>01/04/2012</td>
          <td>Approved</td>
        </tr>
        <tr class="table-success">
          <td>2</td>
          <td>TB - Monthly</td>
          <td>02/04/2012</td>
          <td>Declined</td>
        </tr>
        <tr class="table-warning">
          <td>3</td>
          <td>TB - Monthly</td>
          <td>03/04/2012</td>
          <td>Pending</td>
        </tr>
        <tr class="table-danger">
          <td>4</td>
          <td>TB - Monthly</td>
          <td>04/04/2012</td>
          <td>Call in to confirm</td>
        </tr>
      </tbody>
    </table>
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
		<a class="btn btn-sm btn-secondary" href="#" rel="form-inline">Inline</a>
	</span>
	<div class="preview">Form</div>
	<div class="view">
		<form role="form">
		  <div class="form-group">
		    <label for="exampleInputEmail1">Email address</label>
		    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
		  </div>
		  <div class="form-group">
		    <label for="exampleInputPassword1">Password</label>
		    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
		  </div>
		  <div class="form-group">
		    <label for="exampleInputFile">File input</label>
		    <input type="file" class="form-control-file" id="exampleInputFile">
		    <p class="help-block">Example block-level help text here.</p>
		  </div>
		  <div class="checkbox">
		    <label>
		      <input type="checkbox"> Check me out
		    </label>
		  </div>
		  <button type="submit" class="btn btn-primary">Submit</button>
		</form>
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
		<span class="btn-group btn-group-sm">
	<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Styles <span class="caret"></span></a>
	<div class="dropdown-menu">
				<a href="#" class="dropdown-item" class="" rel="btn-primary">Primary</a>
				<a href="#" class="dropdown-item" class="" rel="btn-secondary">Secondary</a>
				<a href="#" class="dropdown-item" class="" rel="btn-success">Success</a>
				<a href="#" class="dropdown-item" class="" rel="btn-info">Info</a>
				<a href="#" class="dropdown-item" class="" rel="btn-warning">Warning</a>
				<a href="#" class="dropdown-item" class="" rel="btn-danger">Danger</a>
				<a href="#" class="dropdown-item" class="" rel="btn-link">Link</a>
				<a href="#" class="dropdown-item" class="" rel="btn-outline-primary">Primary outline</a>
				<a href="#" class="dropdown-item" class="" rel="btn-outline-secondary">Secondary outline</a>
				<a href="#" class="dropdown-item" class="" rel="btn-outline-success">Success outline</a>
				<a href="#" class="dropdown-item" class="" rel="btn-outline-info">Info outline</a>
				<a href="#" class="dropdown-item" class="" rel="btn-outline-warning">Warning outline</a>
				<a href="#" class="dropdown-item" class="" rel="btn-outline-danger">Danger outline</a>
			</div>
</span>
		<span class="btn-group btn-group-sm">
	<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Size <span class="caret"></span></a>
	<div class="dropdown-menu">
				<a href="#" class="dropdown-item" class="" rel="btn-lg">Large</a>
				<a href="#" class="dropdown-item" class="" rel="btn-md">Default</a>
				<a href="#" class="dropdown-item" class="" rel="btn-sm">Small</a>
			</div>
</span>
						  
		<a class="btn btn-sm btn-secondary" href="#" rel="btn-block">Block</a>
		<a class="btn btn-sm btn-secondary" href="#" rel="active">Active</a>
		<a class="btn btn-sm btn-secondary" href="#" rel="disabled">Disabled</a>
	</span>
	<div class="preview">Button</div>
	<div class="view">
		<button type="button" class="btn btn-success" contenteditable="true">Button</button>		
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
		<span class="btn-group btn-group-sm">
	<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Styles <span class="caret"></span></a>
	<div class="dropdown-menu">
				<a href="#" class="dropdown-item" class="" rel="btn-primary">Primary</a>
				<a href="#" class="dropdown-item" class="" rel="btn-secondary">Secondary</a>
				<a href="#" class="dropdown-item" class="" rel="btn-success">Success</a>
				<a href="#" class="dropdown-item" class="" rel="btn-info">Info</a>
				<a href="#" class="dropdown-item" class="" rel="btn-warning">Warning</a>
				<a href="#" class="dropdown-item" class="" rel="btn-danger">Danger</a>
				<a href="#" class="dropdown-item" class="" rel="btn-link">Link</a>
			</div>
</span>
		<span class="btn-group btn-group-sm">
	<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Size <span class="caret"></span></a>
	<div class="dropdown-menu">
				<a href="#" class="dropdown-item" class="" rel="btn-lg">Large</a>
				<a href="#" class="dropdown-item" class="" rel="btn-md">Default</a>
				<a href="#" class="dropdown-item" class="" rel="btn-sm">Small</a>
			</div>
</span>
						  
		<a class="btn btn-sm btn-secondary" href="#" rel="btn-block">Block</a>
		<a class="btn btn-sm btn-secondary" href="#" rel="active">Active</a>
		<a class="btn btn-sm btn-secondary" href="#" rel="disabled">Disabled</a>
	</span>
	<div class="preview">Anchor Button</div>
	<div class="view">
		<a href="#" class="btn btn-secondary" type="button" contenteditable="true">Button</a>
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
		<span class="btn-group btn-group-sm">
	<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Styles <span class="caret"></span></a>
	<div class="dropdown-menu">
				<a href="#" class="dropdown-item" class="active" rel="">Default</a>
				<a href="#" class="dropdown-item" class="" rel="rounded">Rounded</a>
				<a href="#" class="dropdown-item" class="" rel="rounded-circle">Circle</a>
				<a href="#" class="dropdown-item" class="" rel="img-thumbnail">Thumbnail</a>
			</div>
</span>
	</span>
	<div class="preview">Image</div>
	<div class="view">
		<img alt="Bootstrap Image Preview" src="https://www.layoutit.com/img/sports-q-c-140-140-3.jpg">
	</div>
</div>
</li>
</ul>

<ul class="nav nav-list flex-column accordion-group">
<li class="nav-item nav-header"><i class="fas fa-plus"></i> Components <div class="float-right popover-info"><i class="fas fa-question-circle"></i>
 <div class="popover fade right"><div class="arrow"></div> 
 	<h3 class="popover-title">Help</h3> 
 	<div class="popover-content">Drag &amp; Drop the elements inside the columns where you want to insert it. And from there, you can configure the style of that component. If you need more info please visit  <a target="_blank" href="http://getbootstrap.com/components">Components.</a></div></div> 
 </div>
</li>
<li class="boxes" id="elmComponents">
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
  <span class="configuration">
		<span class="btn-group btn-group-sm">
	<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Size <span class="caret"></span></a>
	<div class="dropdown-menu">
				<a href="#" class="dropdown-item" class="active" rel="">Default</a>
				<a href="#" class="dropdown-item" class="" rel="btn-group-lg">Large</a>
				<a href="#" class="dropdown-item" class="" rel="btn-group-md">Medium</a>
				<a href="#" class="dropdown-item" class="" rel="btn-group-sm">Small</a>
			</div>
</span>
    <a class="btn btn-sm btn-secondary" href="#" rel="btn-group-vertical">Vertical</a>
  </span>
	<div class="preview">Button Group</div>
	<div class="view">
		<div class="btn-group" role="group">
	      <button class="btn btn-secondary" type="button">Left</button>
	      <button class="btn btn-secondary" type="button">Center</button>
	      <button class="btn btn-secondary" type="button">Right</button>
	      <button class="btn btn-secondary" type="button">Justify</button>
	    </div>
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
		<a class="btn btn-sm btn-secondary" href="#" rel="dropup">Dropup</a>
	</span>
	<div class="preview">Dropdowns</div>
	<div class="view">
		<div class="dropdown">
			<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" contenteditable="true">Action</button>
			<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" contenteditable="true">
				<a class="dropdown-item disabled" href="#">Action</a>
			    <a class="dropdown-item" href="#">Another action</a>
			    <a class="dropdown-item" href="#">Something else here</a>				
			</div>
		</div>

	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
		<span class="btn-group btn-group-sm">
	<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Styles <span class="caret"></span></a>
	<div class="dropdown-menu">
				<a href="#" class="dropdown-item" class="" rel="nav-tabs">Default</a>
				<a href="#" class="dropdown-item" class="" rel="nav-pills">Pills</a>
			</div>
</span>
		<a class="btn btn-sm btn-secondary" href="#" rel="flex-column">Vertical</a>
	</span>
	<div class="preview">Navs</div>
	<div class="view">
    <ul class="nav" contenteditable="true">
      <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
      <li class="nav-item"><a class="nav-link disabled" href="#">Messages</a></li>
      <li class="nav-item dropdown ml-md-auto">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </li>
    </ul>
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<div class="preview">Breadcrumb</div>
	<div class="view">

		<nav aria-label="breadcrumb">
		  <ol class="breadcrumb">
		    <li class="breadcrumb-item"><a contenteditable="true" href="#">Home</a></li>
		    <li class="breadcrumb-item"><a contenteditable="true" href="#">Library</a></li>
		    <li class="breadcrumb-item active" contenteditable="true" aria-current="page">Data</li>
		  </ol>
		</nav>

	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
		<span class="btn-group btn-group-sm">
	<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Size <span class="caret"></span></a>
	<div class="dropdown-menu">
				<a href="#" class="dropdown-item" class="" rel="pagination-lg">Large</a>
				<a href="#" class="dropdown-item" class="active" rel="">Medium</a>
				<a href="#" class="dropdown-item" class="" rel="pagination-sm">Small</a>
			</div>
</span>

			</span>
	<div class="preview">Pagination</div>
	<div class="view">
		<nav aria-label="Page navigation example">
		  <ul class="pagination" contenteditable="true">
		    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
		    <li class="page-item"><a class="page-link" href="#">1</a></li>
		    <li class="page-item"><a class="page-link" href="#">2</a></li>
		    <li class="page-item"><a class="page-link" href="#">3</a></li>
		    <li class="page-item"><a class="page-link" href="#">4</a></li>
		    <li class="page-item"><a class="page-link" href="#">5</a></li>
		    <li class="page-item"><a class="page-link" href="#">Next</a></li>
		  </ul>
		</nav>
	</div>
</div>
	<!-- In bootstrap 4 labels are replaced by badges -->
<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
		<span class="btn-group btn-group-sm">
	<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Styles <span class="caret"></span></a>
	<div class="dropdown-menu">
				<a href="#" class="dropdown-item" class="" rel="badge-default">Default</a>
				<a href="#" class="dropdown-item" class="" rel="badge-primary">Primary</a>
				<a href="#" class="dropdown-item" class="" rel="badge-success">Success</a>
				<a href="#" class="dropdown-item" class="" rel="badge-info">Info</a>
				<a href="#" class="dropdown-item" class="" rel="badge-warning">Warning</a>
				<a href="#" class="dropdown-item" class="" rel="badge-danger">Danger</a>
			</div>
</span>
	</span>
	<div class="preview">Label</div>
	<div class="view">
		<span class="badge badge-default" contenteditable="true">Label</span>
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
	</span>
	<div class="preview">Badge</div>
	<div class="view">
    <ul class="nav nav-pills" contenteditable="true">
      <li class="nav-item">
        <a class="nav-link btn btn-primary" href="#">
          Home <span class="badge badge-light">42</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          More <span class="badge badge-secondary">16</span>
        </a>
      </li>
    </ul>

	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
		<a class="btn btn-sm btn-default" href="#" rel="card card-block">Well</a>
	</span>
	<div class="preview">Jumbotron</div>
	<div class="view">
		<div class="jumbotron" contenteditable="true">
			<h2>Hello, world!</h2>
			<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
			<p><a class="btn btn-primary btn-large" href="#">Learn more</a></p>
		</div>
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<div class="preview">Page Header</div>
	<div class="view">
		<div class="page-header">
    	<h1 contenteditable="true">LayoutIt! <small>Interface Builder for Bootstrap</small></h1>
    </div>
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<div class="preview">Text</div>
	<div class="view">
		<h2 contenteditable="true">Heading</h2>
		<p contenteditable="true">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
		<p><a class="btn" href="#" contenteditable="true">View details &raquo;</a></p>
	</div>
</div>
	<!-- In Bootstrap 4 thumbnails are replaced by cards -->
<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<div class="preview">Thumbnails</div>
	<div class="view">
		<div class="row">
      <div class="col-md-4">
        <div class="card">
          <img class="card-img-top" alt="Bootstrap Thumbnail First" src="https://www.layoutit.com/img/people-q-c-600-200-1.jpg">
          <div class="card-block" contenteditable="true">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img class="card-img-top" alt="Bootstrap Thumbnail Second" src="https://www.layoutit.com/img/city-q-c-600-200-1.jpg">
          <div class="card-block" contenteditable="true">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img class="card-img-top" alt="Bootstrap Thumbnail Third" src="https://www.layoutit.com/img/sports-q-c-600-200-1.jpg">
          <div class="card-block" contenteditable="true">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p>
          </div>
        </div>
      </div>
    </div>


	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
		
						  
		<a data-class="progress-bar" class="btn btn-sm btn-secondary" href="#" rel="progress-bar-striped">Striped</a>
		<a data-class="progress-bar" class="btn btn-sm btn-secondary" href="#" rel="progress-bar-animated">Active</a>
	</span>
	<div class="preview">Progress Bar</div>
	<div class="view">
		<div class="progress">
			<div class="progress-bar w-75" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
		</div>
		
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
	</span>
	<div class="preview">Media Object</div>
	<div class="view">
    <div class="media">
      <img class="mr-3" alt="Bootstrap Media Preview" src="https://www.layoutit.com/img/sports-q-c-64-64-8.jpg">
      <div class="media-body" contenteditable="true">
        <h5 class="mt-0">Nested media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
        <div class="media mt-3">
          <a class="pr-3" href="#">
            <img alt="Bootstrap Media Another Preview" src="https://www.layoutit.com/img/sports-q-c-64-64-2.jpg">
          </a>
          <div class="media-body">
            <h5 class="mt-0">Nested media heading</h5>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
          </div>
        </div>
      </div>
    </div>
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
	</span>
	<div class="preview">List group</div>
	<div class="view">
		<div class="list-group">
			<a href="#" class="list-group-item list-group-item-action active">Home</a>
			<div class="list-group-item">List header</div>
			<div class="list-group-item">
				<h4 class="list-group-item-heading">List group item heading</h4>
				<p class="list-group-item-text">...</p>
			</div>
			<div class="list-group-item justify-content-between">
			  Help <span class="badge badge-secondary badge-pill">14</span></div>
			<a href="#" class="list-group-item list-group-item-action active justify-content-between">	Home <span class="badge badge-light badge-pill">14</span>
			</a>
		</div>
	</div>
</div>
	<!-- In bootstrap 4 panels are replaced by cords -->
<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
		<span class="btn-group btn-group-sm">
	<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Styles <span class="caret"></span></a>
	<div class="dropdown-menu">
				<a href="#" class="dropdown-item" class="" rel="bg-default">Default</a>
				<a href="#" class="dropdown-item" class="" rel="text-white bg-primary">Primary</a>
				<a href="#" class="dropdown-item" class="" rel="text-white bg-success">Success</a>
				<a href="#" class="dropdown-item" class="" rel="text-white bg-info">Info</a>
				<a href="#" class="dropdown-item" class="" rel="text-white bg-warning">Warning</a>
				<a href="#" class="dropdown-item" class="" rel="text-white bg-danger">Danger</a>
			</div>
</span>
              
	</span>
	<div class="preview">Cards</div>
	<div class="view">
    <div class="card">
      <h5 class="card-header" contenteditable="true">Card title</h5>
      <div class="card-body" contenteditable="true">
        <p class="card-text">Card content</p>
      </div>
      <div class="card-footer" contenteditable="true">
        Card footer
      </div>
    </div>
	</div>
</div>
 
</li>
</ul>

<ul class="nav nav-list flex-column accordion-group latest-group-sidebar">
<li class="nav-item nav-header"><i class="fas fa-plus"></i> JavaScript 
 <div class="float-right popover-info"><i class="fas fa-question-circle"></i>
 <div class="popover fade right"><div class="arrow"></div> 
 	<h3 class="popover-title">Help</h3> 
 	<div class="popover-content">Drag &amp; Drop the elements inside the columns where you want to insert it. And from there, you can configure the style of that javascript. If you need more info please visit  <a target="_blank" href="http://getbootstrap.com/javascript">JavaScript.</a></div></div> 
 </div>
</li>
<li class="boxes mute" id="elmJS" >
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<div class="preview">Modal</div>
	<div class="view">
		<!-- Button to trigger modal -->
				<a id="myModalLink" href="#myModalContainer" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
		 
    <!-- Modal -->
    <div class="modal fade" id="myModalContainer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="myModalLabel" contenteditable="true">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
          <div class="modal-body" contenteditable="true">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" contenteditable="true">Save changes</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal" contenteditable="true">Close</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
  <span class="btn-group btn-group-sm">
	<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Position <span class="caret"></span></a>
	<div class="dropdown-menu">
				<a href="#" class="dropdown-item" class="active" rel="">Default</a>
				<a href="#" class="dropdown-item" class="" rel="static-top">Static top</a>
				<a href="#" class="dropdown-item" class="" rel="fixed-top">Navbar fixed top</a>
				<a href="#" class="dropdown-item" class="" rel="fixed-bottom">Navbar fixed bottom</a>
			</div>
</span>
		<a class="btn btn-sm btn-secondary" href="#" rel="navbar-dark bg-dark">Navbar Dark</a>
		<!--a class="btn btn-xs btn-default" href="#" rel="navbar-static-top">Static top</a>
		<a class="btn btn-mini" href="#" rel="navbar-fixed-top">Navbar fixed top</a>
		<a class="btn btn-mini" href="#" rel="navbar-fixed-bottom">Navbar fixed bottom</a-->
	</span>
	<div class="preview">Navbar</div>
	<div class="view">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Link <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </li>
        </ul>
        <form class="form-inline">
          <input class="form-control mr-sm-2" type="text" placeholder="Search">
          <button class="btn btn-primary my-2 my-sm-0" type="submit">Search</button>
        </form>
        <ul class="navbar-nav ml-md-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Link <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown link
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
	</span>
	<div class="preview">Tabs</div>
	<div class="view">
		<div class="tabbable" id="myTabs"> <!-- Only required for left/right tabs -->
			<ul class="nav nav-tabs">
				<li class="nav-item"><a class="nav-link active" href="#tab1" data-toggle="tab" contenteditable="true">Section 1</a></li>
				<li class="nav-item"><a class="nav-link"href="#tab2" data-toggle="tab" contenteditable="true">Section 2</a></li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane active" id="tab1">
					<p contenteditable="true">I'm in Section 1.</p>
				</div>
				<div class="tab-pane" id="tab2">
					<p contenteditable="true">Howdy, I'm in Section 2.</p>
				</div>
			</div>
		</div>
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
		<span class="btn-group btn-group-sm">
	<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Styles <span class="caret"></span></a>
	<div class="dropdown-menu">
				<a href="#" class="dropdown-item" class="" rel="alert-success">Success</a>
				<a href="#" class="dropdown-item" class="" rel="alert-info">Info</a>
				<a href="#" class="dropdown-item" class="" rel="alert-warning">Warning</a>
				<a href="#" class="dropdown-item" class="" rel="alert-danger">Danger</a>
			</div>
</span>
              
	</span>
	<div class="preview">Alerts</div>
	<div class="view">
		<div class="alert alert-success alert-dismissable" contenteditable="true">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
			<h4>Alert!</h4>
			<strong>Warning!</strong> Best check yo self, you're not looking too good. <a href="#" class="alert-link">alert link</a>
		</div>
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<div class="preview">Collapse</div>
	<div class="view">
		<div id="accordionV4">
			<div class="card">
				<div class="card-header">
					<a class="card-link" data-toggle="collapse" data-parent="#accordionV4" href="#collapseOne">
						Collapsible Group Item #1
					</a>
				</div>
				<div id="collapseOne" class="collapse show">
					<div class="card-body">
						Anim pariatur cliche...
					</div>
				</div>
			</div>
			<div class="card">
				<div class="card-header">
					<a class="collapsed card-link" data-toggle="collapse" data-parent="#accordionV4" href="#collapseTwo">
						Collapsible Group Item #2
					</a>
				</div>
				<div id="collapseTwo" class="collapse">
					<div class="card-body">
						Anim pariatur cliche...
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
	<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<div class="preview">Carousel</div>
	<div class="view">
		
		
    <div class="carousel slide" id="myCarousel" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-slide-to="0" data-target="#myCarousel" class="active"></li>
        <li data-slide-to="1" data-target="#myCarousel" class=""></li>
        <li data-slide-to="2" data-target="#myCarousel" class=""></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" alt="Carousel Bootstrap First" src="https://www.layoutit.com/img/sports-q-c-1600-500-1.jpg">
          <div class="carousel-caption">
            <h4>First Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" alt="Carousel Bootstrap Second" src="https://www.layoutit.com/img/sports-q-c-1600-500-2.jpg">
          <div class="carousel-caption">
            <h4>Second Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" alt="Carousel Bootstrap Third" src="https://www.layoutit.com/img/sports-q-c-1600-500-3.jpg">
          <div class="carousel-caption">
            <h4>Third Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
        </div>
      </div>

      <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#myCarousel" data-slide="next">
        <span class="carousel-control-next-icon"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
		
	</div>
</div>
</li>
<li>
      
    <a href="https://pages.mylenio.com/layoutit?utm_source=layoutit&utm_medium=banner-ads&utm_campaign=l50&utm_content=bootstrap_banner" target="blank">
		<img class="builder-team-img" alt="Check our new product MyLenio!" src="https://www.layoutit.com/img/layoutit-banner-inner-mylenio.png" width="170px" height="auto" style="margin-top:22px">
	</a>
  </li>
</ul>
	</div>
	<div class="demo">
			<div class="lyrow">
		<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
  <div class="preview">9 3</div>
	<div class="view">
		<div class="row">
			<div class="col-md-12 column ui-sortable">
				<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
  <span class="btn-group btn-group-sm">
	<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Position <span class="caret"></span></a>
	<div class="dropdown-menu">
				<a href="#" class="dropdown-item" class="active" rel="">Default</a>
				<a href="#" class="dropdown-item" class="" rel="static-top">Static top</a>
				<a href="#" class="dropdown-item" class="" rel="fixed-top">Navbar fixed top</a>
				<a href="#" class="dropdown-item" class="" rel="fixed-bottom">Navbar fixed bottom</a>
			</div>
</span>
		<a class="btn btn-sm btn-secondary" href="#" rel="navbar-dark bg-dark">Navbar Dark</a>
		<!--a class="btn btn-xs btn-default" href="#" rel="navbar-static-top">Static top</a>
		<a class="btn btn-mini" href="#" rel="navbar-fixed-top">Navbar fixed top</a>
		<a class="btn btn-mini" href="#" rel="navbar-fixed-bottom">Navbar fixed bottom</a-->
	</span>
	<div class="preview">Navbar</div>
	<div class="view">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Link <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </li>
        </ul>
        <form class="form-inline">
          <input class="form-control mr-sm-2" type="text" placeholder="Search">
          <button class="btn btn-primary my-2 my-sm-0" type="submit">Search</button>
        </form>
        <ul class="navbar-nav ml-md-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Link <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown link
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>
	</div>
</div>
				<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<span class="configuration">
		<a class="btn btn-sm btn-default" href="#" rel="card card-block">Well</a>
	</span>
	<div class="preview">Jumbotron</div>
	<div class="view">
		<div class="jumbotron" contenteditable="true">
			<h2>Hello, world!</h2>
			<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
			<p><a class="btn btn-primary btn-large" href="#">Learn more</a></p>
		</div>
	</div>
</div>
			</div>
		</div>
	</div>
</div>
<div class="lyrow" style="display: block;">
		<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<div class="preview">4 4 4</div>
	<div class="view">
		<div class="row">
			<div class="col-md-4 column ui-sortable" style="">			
				<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<div class="preview">Text</div>
	<div class="view">
		<h2 contenteditable="true">Heading</h2>
		<p contenteditable="true">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
		<p><a class="btn" href="#" contenteditable="true">View details &raquo;</a></p>
	</div>
</div>
			</div>
			<div class="col-md-4 column ui-sortable" style="">
				<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<div class="preview">Text</div>
	<div class="view">
		<h2 contenteditable="true">Heading</h2>
		<p contenteditable="true">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
		<p><a class="btn" href="#" contenteditable="true">View details &raquo;</a></p>
	</div>
</div>
			</div>
			<div class="col-md-4 column ui-sortable" style="">
				<div class="box box-element">
  	<a href="#close" class="remove badge badge-danger"><i class="fas fa-times"></i> remove</a>
	<span class="drag badge badge-default"><i class="fas fa-arrows-alt"></i> drag</span>
	<div class="preview">Text</div>
	<div class="view">
		<h2 contenteditable="true">Heading</h2>
		<p contenteditable="true">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
		<p><a class="btn" href="#" contenteditable="true">View details &raquo;</a></p>
	</div>
</div>
			</div>
		</div>
	</div>
</div>	</div>
	<div class="powered-by col-xs-12 text-right">
	Using <a href="http://getbootstrap.com" target="_blank">Bootstrap</a> 4.0.0
	</div>
	<div id="download-layout"><div class="container-fluid"></div></div>
</div>

<script type="text/javascript">
	$(document).ready(function(){
		
			});
</script>
    <button id="sidebar-mobile"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="512" height="512" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><polygon points="512 120.9 391.1 0 256 135.1 120.9 0 0 120.9 135.1 256 0 391.1 120.9 512 256 376.9 391.1 512 512 391.1 376.9 256 "></polygon></svg></button>
	</div>

  <script>
    function saveLayout(){
      $.ajax({  
        type: "POST",  
        url: "/build_v4/saveLayout",  
        data: { 'layout-v4': $('.demo').html() },  
        success: function(data) {

        }
      });
    }

    function downloadLayout(){
      $.ajax({  
        type: "POST",  
        url: "/build_v4/downloadLayout",  
        data: { 'layout-v4': $('#download-layout').html() },  
        success: function(data) { window.location.href = '/build_v4/download'; }
      });
    }

    function downloadHtmlLayout(){
      $.ajax({  
        type: "POST",  
        url: "/build_v4/downloadLayout",  
        data: { 'layout-v4': $('#download-layout').html() },  
        success: function(data) { window.location.href = '/build_v4/downloadHtml'; }
      });
    }

    function undoLayout() {
      
      $.ajax({  
        type: "POST",  
        url: "/build_v4/getPreviousLayout",  
        data: { },  
        success: function(data) {
          undoOperation(data);
        }
      });
    }

    function redoLayout() {
      
      $.ajax({  
        type: "POST",  
        url: "/build_v4/getPreviousLayout",  
        data: { },  
        success: function(data) {
          redoOperation(data);
        }
      });
    }
  </script>

  <script type="text/javascript">
    $(document).ready(function() {
  // Mobile sidebar
  $('#sidebar-mobile').on('click', function() { $(this).toggleClass('active'); $('.sidebar-nav').toggleClass('active'); });
});
  </script>

  <div class="modal fade" id="layoutitModal" tabindex="-1" role="dialog" aria-labelledby="layoutitModal" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content"></div>
	</div>
</div> 
</body>

</html>
